<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_3352173_7m2uv72ag24.css">
  <title>Leeao个人网页</title>
  <style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .bai {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    background: #000;
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
  }

  blockquote {
    color: #ca8f4d;
    position: relative;
    border-left: solid 4px #ca8f4d;
    background: #222;
    text-shadow: none;
    padding: 25px;
    margin-bottom: 15px;

  }

  .nr {
    background: #000;
    padding: 25px;
    height: 80vh;
    overflow-y: auto;
  }

  .nr .title {
    font-size: 44px;
    color: #ca8f4d;
    text-align: center;
    padding-bottom: 3vh;
    padding-top: 2vh;
  }

  .nr .time {
    text-align: center;
    margin-bottom: 3vh;
    border: solid 1px #444;
    background: #222;
    padding: 0.5vh 0;
  }

  .nr .ms a {
    color: #f60;
  }

  .nr .ms {
    font-size: 16px;
    color: #ccc;
  }

  .nr .ms p {
    margin-bottom: 15px;
  }

  .nr .ms img {
    max-width: 100%;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: solid 8px #333;
    border-radius: 16px;
  }

  .menu {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 44;
    background: rgba(165, 45, 28, .5);
    padding: 5px;
    border-radius: 10px;
  }

  .menu li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .menu li:last-child {
    margin-bottom: 0;
  }

  .menu li span {
    position: relative;
    width: 14px;
    height: 14px;
    transition: all .5s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menu li span:after {
    content: '';
    background: rgba(255, 255, 255, 1);
    width: 8px;
    height: 8px;
    border-radius: 20% 30% 30% 70%/60% 40% 60% 40%;
    transition: all .5s;
  }

  .menu li span:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 20% 30% 30% 70%/60% 40% 60% 40%;
    transition: all .5s;
    border: solid 1px rgba(255, 255, 255, 1);
  }

  .menu li i {
    font-style: normal;
    white-space: nowrap;
    font-size: 12px;
    padding-right: 8px;
    opacity: 0;
    transition: all .5s;
    transform: translateX(-140%);
    position: absolute;
  }

  .menu li:hover i {
    opacity: 1;
    color: #ffad61;
    transform: translateX(-100%);
  }

  .menu li:hover span:after, .menu li.cur span:after {
    background: #ffad61;
    transform: scale(.5);
  }

  .menu li.cur span:before, .menu li:hover span:before {
    border-color: #ffad61;
  }

  .win {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
  }

  .wink {
    position: absolute;
    max-width: 800px;
    width: 100%;
    left: 50%;
    top: 50%;
    z-index: 2;
    border: 12px solid #ddd;
    border-image: linear-gradient(#ffad61, #db2c1e, #ffad61) 1 1;
  }

  .wink video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .wink i {
    position: absolute;
    width: 50px;
    height: 50px;
    background: conic-gradient(from 45deg, #ffad61, #ff7b42, #a52d1c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 100%;
    top: -50px;
    right: -50px;
    cursor: pointer;
  }


  .win .mark {
    background: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  body {
    color: white;
    text-shadow: 1px 1px 3px black;
    user-select: none;
    width: 100%;
    overflow-x: hidden;
    background: #000;
  }

  .dj, .dj body {
    height: 100vh;
    overflow: hidden;
  }

  .tx {
    border-radius: 100%
  }

  section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(0deg, #000, transparent, #000);
  }

  section:nth-child(4) {
    align-items: start;
    width: 100%;
  }

  section:nth-child(4) .content {
    width: 100%;
  }

  section:nth-child(4) h1 {
    padding: 8vh 0 0;
  }

  section:nth-child(4) .article {
    width: 50vw
  }


  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  section:nth-child(1) .bg {
    background-image: url("bg1.jpg");
  }

  section:nth-child(2) .bg {
    background-image: url("bg2.jpg");
  }

  section:nth-child(3) .bg {
    background-image: url("bg3.jpg");
  }

  section:nth-child(4) .bg {
    background-image: url("bg4.jpg");
  }

  h1 {
    z-index: 1;
    font-size: 88px;
    font-weight: 300;
    letter-spacing: 12px;
  }

  h2 {
    z-index: 1;
    font-size: 18px;
    font-weight: 100;
    letter-spacing: 8px;
  }


  section .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sec1 .content img {
    width: clamp(80px, 7vw, 7vw);
    border: solid 4px #fff;
    filter: drop-shadow(1px 1px 3px black);
    margin-bottom: 10vh;
    /*margin-top: -20vh;*/
    background-image: radial-gradient(#ffad61, #db2c1e);

  }

  .pos {
    display: flex;
    align-items: center;
    padding-top: 10vh;
  }

  .pos .iconfont {
    padding-right: .5vw;
  }

  .works {
    width: 78vw;
    max-width: 500px;
  }

  .works ul {
    padding-top: 14vh;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 15px);
  }

  .works ul li {
    width: 50%;
    line-height: 44px;
    padding-bottom: 15px;
    position: relative;
    padding-right: 15px;
  }

  .works ul li:nth-child(even) {
    margin-right: 0;
  }

  .works ul li.hot:before {
    content: '推荐';
    position: absolute;
    background: red;
    color: #fff;
    border-radius: 14%;
    right: 15px;
    top: 0;
    font-size: 12px;
    height: 20px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .works ul li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #fff;
    background: conic-gradient(from 45deg, #ffad61, #ff7b42, #a52d1c);
    border-radius: 22px;
    justify-content: center;
  }

  .works ul li a:hover {
    background: conic-gradient(from 45deg, #ffad61, #ff7b42, #f00);
  }

  .works ul li i {
    font-size: 12px;
    padding-right: .5vw;
  }

  .life {
    width: 90vw;
    display: flex;
    justify-content: center;
  }

  .life ul {
    padding-top: 8vh;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .life ul li {
    width: 8%;
    padding-bottom: 8%;
    margin: 1vw 1vw;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
  }

  .life ul li .text {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .6);
    border-radius: 100%;
    opacity: 0;
    transition: all .4s;
    cursor: pointer;
  }

  .life ul li .text span {
    font-size: 1vw;
    padding: 0 1vw;
    text-align: center;
    transition: all .4s;
    transform: translateY(200%);
  }

  .life ul li .text i {
    font-size: .6vw;
    transition: all .4s;
    transform: translateY(100%);
  }

  .life ul li:hover .text {
    opacity: 1;
  }

  .life ul li:hover .text span, .life ul li:hover .text i {
    transform: translateY(0%);
  }


  .life ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: .4vw;
    position: absolute;
    background: #fff;
    top: 0;
    border-radius: 100%;
  }

  .article {
    padding-top: 12vh;
  }

  .article .page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
  }

  .article .page span {
    background: #444;
    padding: 0 8px;
    cursor: pointer;
  }

  .article .page span:first-child {
    border-radius: 5px 0 0 5px;
  }

  .article .page span:last-child {
    border-radius: 0 5px 5px 0;
  }

  .article .page span.cur {
    background: #db38b5;
    pointer-events: none;
  }

  .article ul {
    flex-wrap: wrap;
    display: flex;
    width: calc(100% + 15px);
  }

  .article li {
    width: 33.33%;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all .4s;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  .article li a {
    background: linear-gradient(45deg, #db38b5, #23134e);
    width: fit-content;
    padding: 8px 8px 8px 28px;
    border-radius: 12px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    align-items: center;
  }

  .article li a:before {
    left: 10px;
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    background: #f60;
    border-radius: 100%;
    transition: all .4s;
    top: 50%;
    transform: translateY(-50%);
  }

  .article li a:hover:before {
    background: #fff;
  }

  .more {
    text-decoration: none;
    margin-top: 5vh;
    color: #000;
    background: #fff;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
    transition: all .4s;
    font-weight: bold;
  }

  .more:hover {
    background: #ffad61;
    color: #fff;
  }

  .btn_play {
    background: url("btn_play.png");
    width: 77px;
    height: 77px;
    background-size: cover;
    cursor: pointer;
    margin-top: 10vh;
  }

  .progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background-image: linear-gradient(to right, #db38b5, #01b3e3, #25ce7b, #fdc741, #ff6b01, #fc4236);
    background-attachment: fixed;
    z-index: 888;
  }


  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 7px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background: #444;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    background-image: linear-gradient(#ffad61, #db2c1e, #ffad61);
    border-radius: 4px;
  }

  .nr::-webkit-scrollbar-thumb {
    background: #666;
  }

  @media screen and (max-width: 1200px) {
    .life ul li {
      width: 12%;
      padding-bottom: 12%;
    }

  }

  @media screen and (max-width: 768px) {
    .nr {
      padding: 15px;
    }

    .nr .title {
      font-size: 18px;
    }

    .nr .ms {
      font-size: 14px;
    }

    section:nth-child(4) .article {
      width: 80vw;
    }

    .article li {
      width: 50%;
      font-size: 12px;
      padding-right: 10px;
      padding-bottom: 10px;
    }

    .progress {
      height: 8px;
    }

    .menu {
      right: 15px;
    }

    h1 {
      font-size: 10vw;
    }

    h2 {
      font-size: 3vw;
    }

    .life ul li {
      width: 20%;
      padding-bottom: 20%;
      margin-bottom: 2vw;
    }


    .more {
      width: 20px;
      height: 20px;
    }

    .more i {
      font-size: 12px;
    }

    .wink {
      width: 82%;
      border-width: 8px;
    }

    .wink i {
      width: 30px;
      height: 30px;
      font-size: 14px;
      top: -15px;
      right: -15px;
    }

  }

  @media screen and (max-width: 420px) {
    section:nth-child(1) .bg, section:nth-child(2) .bg, section:nth-child(3) .bg, section:nth-child(4) .bg {
      background-image: none;
    }

    .bg:before {
      content: "";
      background-image: inherit;
      background-position: inherit;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: -1;
    }

    section:nth-child(1) .bg:before {
      background-image: url("bg1.jpg");
    }

    section:nth-child(2) .bg:before {
      background-image: url("bg2.jpg");
    }

    section:nth-child(3) .bg:before {
      background-image: url("bg3.jpg");
    }

    section:nth-child(4) .bg:before {
      background-image: url("bg4.jpg");
    }

    .menu {
      right: inherit;
      bottom: 15px;
      top: inherit;
      left: 50%;
      transform: translate(-50%, 0%);
    }

    .menu ul {
      display: flex;
      align-items: center;
    }

    .menu li {
      margin-right: 10px;
      margin-bottom: inherit;
    }

    .menu li i {
      display: none
    }
  }

  </style>
</head>
<body>
<section class="sec1">
  <div class="bg"></div>
  <div class="content">
    <img src="photo.jpg" class="tx">
    <h1>LEEAO个人网页</h1>
    <h2>LEEAO's Personal Web Sites</h2>
    <div class="btn_play"></div>
    <div class="pos">
      <div class="iconfont icon-dingwei"></div>
      <div class="dw">福建•厦门</div>
    </div>
  </div>
</section>
<section>
  <div class="bg"></div>
  <div class="content">
    <h1>工作</h1>
    <h2>Works</h2>
    <div class="works">
      <ul>
        <li class="hot"><a href="https://sheep.leeao82.com" target="_blank"><i class="icon-add iconfont"></i>养了个羊</a>
        </li>
        <li><a href="https://docs.leeao82.com" target="_blank"><i class="icon-add iconfont"></i>VUE组件库</a></li>
        <li><a href="https://code.leeao82.com" target="_blank"><i class="icon-add iconfont"></i>个人微码</a></li>
        <li><a href="https://code.leeao82.com/#/plugin/" target="_blank"><i class="icon-add iconfont"></i>JS插件</a></li>
        <li><a href="https://code.leeao82.com/#/utils/" target="_blank"><i class="icon-add iconfont"></i>工具类</a></li>
        <li><a href="https://history.leeao82.com" target="_blank"><i class="icon-add iconfont"></i>中国历史事件</a></li>
      </ul>
    </div>
  </div>
</section>
<section>
  <div class="bg"></div>
  <div class="content">
    <h1>生活</h1>
    <h2>Lifes</h2>
    <div class="life">
      <ul>
      </ul>
    </div>
    <a class="more" href="https://leeao8.gitee.io/life/" target="_blank"><i class="iconfont icon-add"></i></a>
  </div>
</section>
<section>
  <div class="bg">
  </div>
  <div class="content">
    <h1>文章</h1>
    <h2>Articles</h2>
    <div class="article">
      <ul>

      </ul>
    </div>
  </div>
</section>
<div class="progress"></div>
<div class="menu">
  <ul>
    <li><i>首页</i><span></span></li>
    <li><i>工作</i><span></span></li>
    <li><i>生活</i><span></span></li>
    <li><i>文章</i><span></span></li>
  </ul>
</div>
<div class="bai" style="">0%</div>
<script src="js/gsap.min.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<script src="js/loadImg.js"></script>
<script>
//先加载全站资源LOADING
document.querySelector('html').classList.add('dj')
let bai = document.querySelector('.bai')
//加載...
let f = ["photo", "https://leeao8.gitee.io/life/album/20220508/9", "https://leeao8.gitee.io/life/album/20220417/1", "https://leeao8.gitee.io/life/album/20220220/3", "https://leeao8.gitee.io/life/album/20220131-2/2", "https://leeao8.gitee.io/life/album/20200413/11", "https://leeao8.gitee.io/life/album/20200308/1", "https://leeao8.gitee.io/life/album/20200223/2", "https://leeao8.gitee.io/life/album/20191208/1", "https://leeao8.gitee.io/life/album/20191102/2", "https://leeao8.gitee.io/life/album/20190831/1", "https://leeao8.gitee.io/life/album/20160810/1", "https://leeao8.gitee.io/life/album/20160610/5", "https://leeao8.gitee.io/life/album/20160510/1", "https://leeao8.gitee.io/life/album/20220430/1", "bg1", "bg2", "bg3", "bg4"];
let fm = '.jpg'
let url = []
for (let i = 0; i < f.length; i++) {
    url.push(f[i] + fm)
}
let tops = [];
let section = document.querySelectorAll('section');
new loadImg({
    imgs: url,
    onComplete: function () {
        gsap.to(bai, {
            duration: .4,
            opacity: 0,
            onComplete: () => {
                bai.remove()
                document.querySelector('html').classList.remove('dj')
            }
        });

    },
    onLoad: function (at) {
        bai.innerText = at + '%'

    }
});
//
batch('.works li')
//文章获取
let pageNum;
let curpage = 1
let totalPage
let sw = window.innerWidth
pages(sw)
window.addEventListener('resize', () => {
    sw = window.innerWidth
    pages(sw)
})

function pages(sw) {
    if (sw > 768) {
        pageNum = 30
    } else {
        pageNum = 16
    }
}


let article = document.querySelector('.article')
let articleul = article.querySelector('ul')
fetch('http://hn216.api.yesapi.cn/api/App/Table/FreeQuery?app_key=1D5AF16FD7D90EE3C5CF70D088249505&model_name=article&perpage='+pageNum).then((rs) => {
    return rs.json()
}).then((data) => {
    totalPage = Math.ceil(data.data.total / pageNum)
    let page = document.createElement('div')
    page.className = 'page'
    loadData(data, curpage)
    for (let i = 1; i <= totalPage; i++) {
        let span = document.createElement('span')
        span.innerText = i
        if (curpage === i) {
            span.className = 'cur'
        }
        span.addEventListener('click', () => {
            curpage = i
            Array.from(span.parentNode.children).forEach((el) => {
                el.className = ''
            })
            if (curpage === i) {
                span.className = 'cur'
            }
            loadData(data, curpage)
        })
        page.appendChild(span)
    }
    article.appendChild(page)

})

function loadData(data, curpage) {
    data.sort((a, b) => {
        let atime = a.time.replace(/-/g, '')
        let btime = b.time.replace(/-/g, '')
        if (atime >= btime&&a.id>=b.id) {
            return -1
        } else {
            return 1
        }
    })
    let curpageData = data.filter((el, index) => {
        return index >= (curpage - 1) * pageNum && index < curpage * pageNum
    })
    articleul.innerHTML = ''
    curpageData.forEach((el) => {
        let li = document.createElement('li')
        let a = document.createElement('a')
        a.innerText = el.title
        li.appendChild(a)
        li.addEventListener('click', () => {
            openWin('article', el)
        })
        articleul.appendChild(li)
    })
    //batch('.article li')

}

//生活图片获取
let lifeul = document.querySelector('.life').querySelector('ul')
fetch('https://www.fastmock.site/mock/5f854ec44ed74b246903c6e75806ec14/api/life').then((rs) => {
    return rs.json()
}).then((data) => {
    data.sort((a, b) => {
        let atime = a.time.replace(/-/g, '')
        let btime = b.time.replace(/-/g, '')
        if (atime >= btime) {
            return -1
        } else {
            return 1
        }
    })
    lifeul.innerHTML = ''
    data = data.filter((el, xh) => {
        return xh < 14
    })
    data.forEach((el) => {
        let li = document.createElement('li')
        let text = document.createElement('div')
        let i = document.createElement('i')
        i.innerText = el.time
        let span = document.createElement('span')
        span.innerText = el.title
        text.className = 'text'
        text.appendChild(i)
        text.appendChild(span)
        let img = document.createElement('img')
        img.src = el.pic
        li.appendChild(text)
        li.appendChild(img)
        lifeul.appendChild(li)
        li.addEventListener('click', () => {
            openWin('article', el)
        })
    })
    batch('.life li')
})
//

section.forEach(function (el, index) {
    tops.push(el.offsetTop)
    let innerWidth = window.innerWidth;
    let innerHeight = window.innerHeight;
    let bg = el.querySelector('.bg')
    //bg.style.backgroundImage = `url(https://picsum.photos/${innerWidth}/${innerHeight}?v=${index})`
    if (index) {
        bg.style.backgroundPosition = `50% ${innerHeight / 2}px`;
        gsap.to(bg, {
            backgroundPosition: `50% ${-innerHeight / 2}px`,
            ease: "none",
            scrollTrigger: {
                trigger: el,
                scrub: true
            }
        });
    } else {
        bg.style.backgroundPosition = "50% 0px";
        gsap.to(bg, {
            backgroundPosition: `50% ${-innerHeight / 2}px`,
            ease: "none",
            scrollTrigger: {
                trigger: el,
                start: "top top",
                scrub: true
            }
        });
    }
})

//
let btn_play = document.querySelector('.btn_play')
btn_play.addEventListener('click', () => {
    openWin('video')
})
//右边导航
let li = document.querySelector('.menu').querySelectorAll('li')
li.forEach((el, xh) => {
    el.addEventListener('click', () => {
        section[xh].scrollIntoView({behavior: "smooth", block: "end"});
    })
})
li[0].classList.add('cur')
window.addEventListener('scroll', () => {
    let f = tops.filter((el) => {
        return this.scrollY >= el
    })
    let which = Math.max(...f)
    let xh = tops.indexOf(which)
    li.forEach((el, index) => {
        if (xh === index) {
            el.classList.add('cur')
        } else {
            el.classList.remove('cur')
        }
    })
})
//进度条
gsap.from('.progress', {
    width: 0,
    ease: 'none',
    scrollTrigger: {
        scrub: true
    }
});

//弹窗内容方法
function openWin(type, el) {
    let win = document.createElement('div')
    let wink = document.createElement('div')
    let mark = document.createElement('div')
    let i = document.createElement('i')
    i.className = 'iconfont icon-close'
    win.className = 'win'
    wink.className = 'wink'
    mark.className = 'mark'
    if (type === 'video') {
        let video = document.createElement('video')
        fetch('https://www.fastmock.site/mock/5f854ec44ed74b246903c6e75806ec14/api/video').then((rs) => {
            return rs.json()
        }).then((data) => {
            video.src = data.url
        })
        video.autoplay = true
        wink.appendChild(video)

    } else {
        let nr = document.createElement('div')
        let title = document.createElement('h3')
        let time;
        if (el.time) {
            time = document.createElement('div')
            time.className = 'time'
            time.innerText = el.time
        }
        let ms = document.createElement('div')
        nr.className = 'nr'
        title.className = 'title'
        ms.className = 'ms'
        ms.innerHTML = el.nr
        title.innerText = el.title
        nr.appendChild(title)
        if (el.time) {
            nr.appendChild(time)
        }
        nr.appendChild(ms)
        wink.appendChild(nr)
        //处理图片懒加载 BEGIN
        let lis = ms.querySelectorAll('li').length > 0 ? ms.querySelectorAll("li") : ms.querySelectorAll("p");
        lis.forEach((el) => {
            if (el.querySelector('img')) {
                let img = el.querySelector('img')
                img.dataset.src = img.src
                img.src = 'grey2.gif'
            }
        })
        setTimeout(() => {
            const observer = new IntersectionObserver(nodes => {
                nodes.forEach(v => {
                    if (v.isIntersecting) { // 判断是否进入可视区域
                        if (v.target.querySelector('img')) {
                            v.target.querySelector('img').src = v.target.querySelector('img').dataset.src; // 赋值加载图片
                            observer.unobserve(v.target); // 停止监听已加载的图片
                        }
                    }
                });
            });
            lis.forEach(v => observer.observe(v));
        }, 1000)
        //处理图片懒加载 END
    }
    wink.appendChild(i)
    win.appendChild(wink)
    win.appendChild(mark)
    document.body.appendChild(win)
    gsap.set(wink, {
        x: '-50%',
        y: '100%'
    });
    gsap.to(wink, {
        duration: .4, scale: 1, y: '-50%'
    });
    gsap.set(mark, {
        opacity: 0
    });
    gsap.to(mark, {
        opacity: 1
    });
    i.addEventListener('click', () => {
        gsap.to(wink, {
            duration: .4, y: '100%',
            onComplete: function () {
                win.remove()
            }
        });
        gsap.to(mark, {
            opacity: 0
        });
    })
}

//物体批量交替出现
function batch(el) {
    gsap.set(el, {y: 200, opacity: 0});
    ScrollTrigger.batch(el, {
        onEnter: (elements) => {
            gsap.to(elements, {duration: .3, y: 0, opacity: 1, stagger: 0.15});
        },
        onLeave: (elements) => {
            gsap.to(elements, {duration: .3, y: 200, opacity: 0, stagger: 0.15});
        },
        onEnterBack: (elements) => {
            gsap.to(elements, {duration: .3, y: 0, opacity: 1, stagger: 0.15});
        },
        onLeaveBack: (elements) => {
            gsap.to(elements, {duration: .3, y: 200, opacity: 0, stagger: 0.15});
        }
    });
}
</script>
</body>
</html>
